<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>车享乐-商品详情</title>
	<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/css/main.css">
	<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/static/js/slide.js"></script>
	<script type="text/javascript" src="../../static/layui/layui.js"></script>
	<link href="../../static/layui/css/layui.css" rel="stylesheet" rel="stylesheet">
	<script src="../../static/mylayer.js" type="text/javascript" charset="utf-8"></script>
	<style>
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}
		.goods_detail_list div {
			margin-bottom: 10px;
		}
		.button-space {
			margin: 0 10px; /* 设置左右间距为10px */
		}

	</style>
</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到鑫鑫车享乐租车系统!  祝您畅享旅途，鑫鑫相伴！</div>
			<div class="fr">
				<div class="user_link fl">
					<a href="javascript:;">
						欢迎您：<img class="avatar-img" src="/pic/${user.avatar}"/>
						${user.username}
					</a>
					<span>|</span>
					<a href="/page/user/info">用户中心</a>
					<span>|</span>
					<a href="/page/user/order">我的订单</a>
					<span>|</span>
					<a href="javascript:logout()">注销</a>
				</div>
			</div>
		</div>
	</div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/pic/xx-logo.png" width="180%"></a>
		<div class="search_con fl">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>
	</div>

	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>	
				<span></span>			
				<ul class="subnav" id="LAY_BrandList">

				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="/">首页</a></li>
				<li class="interval">|</li>
				<li><a href="/page/car/list">全部车辆</a></li>
			</ul>
		</div>
	</div>

	<div class="breadcrumb" id="LAY_brandName">

	</div>

	<div class="goods_detail_con clearfix">
		<div class="goods_detail_pic fl" id="LAY_CarDetail2"></div>
		<div class="goods_detail_list fr">
			<div id="LAY_CarDetail1">

			</div>
			
			<div class="layui-form-item">
				<div class="layui-inline">租赁时间：</div>
				<div class="layui-inline">
					<div class="layui-inline" id="ID-laydate-range">
						<div class="layui-input-inline">
							<input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
						</div>
						<div class="layui-form-mid">-</div>
						<div class="layui-input-inline">
							<input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
						</div>
					</div>
				</div>
			</div>
			<div class="operate_btn" id="LAY_CarDetail4">

			</div>
		</div>
	</div>

	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>新品推荐</h3>
				<ul id="LAY_CarListNew">

				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<ul class="detail_tab clearfix">
				<li class="active">商品介绍</li>
			</ul>

			<div class="tab_content">
				<dl id="LAY_CarDetail3">

				</dl>
			</div>

		</div>
	</div>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>



	<script type="text/javascript">
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/car/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});
		layui.use(function(){
			var laydate = layui.laydate;

			// laydate.render({
			// 	elem: '#ID-laydate-range',
			// 	range: ['#ID-laydate-start-date', '#ID-laydate-end-date'],
			// 	type: 'datetime',
			// });
			laydate.render({
				elem: '#ID-laydate-start-date',
				type: 'datetime',
				fullPanel: true // 2.8+
			});
			laydate.render({
				elem: '#ID-laydate-end-date',
				type: 'datetime',
				fullPanel: true // 2.8+
			});
		});
		$.post(
				'/brand?method=selectByBrand',
				function (result) {
					if (result.code == 0) {
						$('#LAY_BrandList').empty();
						$(result.data).each(function () {
							$('#LAY_BrandList').append('<li><a href="list?brandId=' + this.brandId + '">'+this.brandName+'</a></li>');
						})
					}
				},
				'json'
		);
		var queryString = window.location.search;
		var urlParams = new URLSearchParams(queryString);
		var brandId = urlParams.get("brandId");
		$.post(
				'/brand?method=selectByBrandName',
				{'brandId':brandId},
				function (result) {
					if (result.code == 0) {
						$('#LAY_brandName').empty();
						var html = '';
						$(result.data).each(function () {
							html += '<a href="#">全部分类</a>'
							html += '<span>></span>'
							html += '<a href="#">'+this.brandName+'</a>'
							html += '<span>></span>'
							html += '<a href="#">商品详情</a>'
						})
						$('#LAY_brandName').append(html);
					}
				},
				'json'
		);
		$.post(
				'/car?method=selectByBrandCar',
				{ 'brandId': brandId },
				function (result) {
					if (result.code == 0) {
						var html = '';
						$('#LAY_CarListNew').empty();
						$(result.data.slice(-2)).each(function () {

							html += '<li>'
							html += '  <a href="/page/detail?carId=' + this.id + '&brandId=' + this.brandId + '"><img src="/pic/' + this.image + '"></a>'
							html += '	 <h4><a href="/page/detail?carId=' + this.id + '&brandId=' + this.brandId + '">' + this.model + '</a></h4>'
							html += '	 <div class="prize">¥ ' + this.rentalPrice + '</div>'
							html += '</li>'
						});
						$('#LAY_CarListNew').append(html);
					}
				},
				'json'
		);
		var carId = urlParams.get("carId");
		$.post(
				'/car?method=selectByCar',
				{ 'carId': carId },
				function (result) {
					if (result.code == 0) {
						var html = '';

						$('#LAY_CarDetail1').empty();
						$(result.data).each(function () {
							html += '<h3>'+this.model+'</h3><br><br>'
							html += '<div class="layui-form-item">'
							html += '	<div class="layui-inline">车牌号码：</div>'
							html += '	<div class="layui-inline">'
							html += '		<div class="layui-inline">'
							html += '			<div class="layui-input-inline">'
							html += '				<input type="text" class="layui-input" autoComplete="off" placeholder="' + this.licensePlate + '" disabled>'
							html += '			</div>'
							html += '		</div>'
							html += '	</div>'
							html += '	<div class="layui-inline">生产年份：</div>'
							html += '	<div class="layui-inline">'
							html += '		<div class="layui-inline">'
							html += '			<div class="layui-input-inline">'
							html += '				<input type="text" class="layui-input" autoComplete="off" placeholder="' + this.year + '" disabled>'
							html += '			</div>'
							html += '		</div>'
							html += '	</div>'
							html += '</div>'
							html += '<div class="layui-form-item">'
							html += '	<div class="layui-inline">车辆颜色：</div>'
							html += '	<div class="layui-inline">'
							html += '		<div class="layui-inline">'
							html += '			<div class="layui-input-inline">'
							html += '				<input type="text" class="layui-input" autoComplete="off" placeholder="' + this.color + '" disabled>'
							html += '			</div>'
							html += '		</div>'
							html += '	</div>'
							html += '	<div class="layui-inline">每日租金：</div>'
							html += '	<div class="layui-inline">'
							html += '		<div class="layui-inline">'
							html += '			<div class="layui-input-inline">'
							html += '				<input type="text" class="layui-input" autoComplete="off" placeholder="¥' + this.rentalPrice + '" disabled>'
							html += '			</div>'
							html += '		</div>'
							html += '	</div>'
							html += '</div>'

							// html += '<h3>'+this.model+'</h3><br><br>'
							// html += '	<div>'
							// html += '		<div class="layui-inline">车牌号码：' + this.licensePlate + '</div>'
							// html += '		<div class="layui-inline">生产年份：' + this.year + '</div>'
							// html += '	</div>'
							// html += '	<div>'
							// html += '		<div class="layui-inline">车辆颜色：' + this.color + '</div>'
							// html += '		<div class="layui-inline">每日租金：¥' + this.rentalPrice + '</div>'
							// html += '	</div>'
						});
						$('#LAY_CarDetail1').append(html);
					}
				},
				'json'
		);
		$.post(
				'/car?method=selectByCar',
				{ 'carId': carId },
				function (result) {
					if (result.code == 0) {
						var html = '';
						$('#LAY_CarDetail2').empty();
						$(result.data).each(function () {
							html += '<img src="/pic/' + this.image + '" width="350px" height="350px">'
						});
						$('#LAY_CarDetail2').append(html);
					}
				},
				'json'
		);
		$.post(
				'/car?method=selectByCar',
				{ 'carId': carId },
				function (result) {
					if (result.code == 0) {
						var html = '';
						$('#LAY_CarDetail3').empty();
						$(result.data).each(function () {
							html += ' <dd>'+this.details+'</dd>'
						});
						$('#LAY_CarDetail3').append(html);
					}
				},
				'json'
		);
		$.post(
				'/car?method=selectByCar',
				{ 'carId': carId },
				function (result) {
					if (result.code == 0) {
						var html = '';
						$('#LAY_CarDetail4').empty();
						$(result.data).each(function () {
							if (this.rentStatus == 1) {
								html += '<button type="button" class="layui-btn layui-bg-red" lay-submit lay-filter="submitAdd">立即购买</button>';
								html += '<span class="button-space"></span>';
								html += '<button type="button" class="layui-btn layui-bg-blue">空闲</button>';
							} else if (this.rentStatus == 0) {
								html += '<button type="button" class="layui-btn layui-btn-disabled">立即购买</button>';
								html += '<span class="button-space"></span>';
								html += '<button type="button" class="layui-btn layui-bg-purple">租用</button>';
							}
						});
						$('#LAY_CarDetail4').append(html);
					}
				},
				'json'
		);
		$(document).on('click', '.layui-bg-red', function() {

			// 获取时间输入框的值
			var startTime = $('#ID-laydate-start-date').val();
			var endTime = $('#ID-laydate-end-date').val();

			// 构建要发送的数据对象
			var dataToSend = {
				rentalStartDate: startTime,
				rentalEndDate: endTime,
				userId: ${user.id},
				carId: carId

			};

			$.post(
					'/order?method=addOrder',
					dataToSend,
					function (result) {
						console.log(result);
						if (result.code == 0) {
							mylayer.okMsg(result.msg);
							window.location.href = '/page/user/order';
						} else {
							mylayer.errorMsg(result.msg);
						}
					},
					'json'
			);
			return false;
		});
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user?method=logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okUrl(result.msg, '/page/login');
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}
	</script>
	
</body>
</html>